<template>
  <div class="my-box">
    <div class="my-collapse" @click="myCollapseFlag">
      <i class="el-icon-s-unfold" v-if="isCollapse" style="font-size:3rem;"></i>
      <i class="el-icon-s-fold" v-if="!isCollapse" style="font-size:3rem;"></i>
    </div>
    <div class="my-tabs">
      <el-tag
        :class="{activeClass:option.activeClass}"
        :key="index"
        v-for="(option,index) in this.$store.state.options"
        :closable="option.closable"
        :disable-transitions="false"
        @close="handleClose(option)"
        @click="clickToRouter(option)">
        {{option.title}}
      </el-tag>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tab',
  data () {
    return {
      isCollapse: false // 默认菜单展开
    }
  },
  methods: {
    // 菜单展开,收缩标识传值方法
    myCollapseFlag () {
      this.isCollapse = !this.isCollapse
      this.$emit('myCollapseFlag', this.isCollapse)
    },
    // 关闭tab函数
    handleClose (option) {
      if (option.activeClass) {
        // 获取关闭tab的前一个tab索引
        let index = this.$store.state.options.indexOf(option) - 1
        let i = -1
        let activeItem = null
        for (let item of this.$store.state.options) {
          i++
          if (i === index) {
            item.activeClass = true
            activeItem = item
          } else {
            item.activeClass = false
          }
        }
        this.$router.push(activeItem.index)
      }
      this.$store.commit('delTab', option)
    },
    // 点击跳转当前路由
    clickToRouter (option) {
      for (let item of this.$store.state.options) {
        if (item.index === option.index) {
          item.activeClass = true
        } else {
          item.activeClass = false
        }
      }
      this.$router.push(option.index)
    }
  }

}
</script>

<style>
.activeClass{
  background: #fff;
}
.my-box{
  width:100%;
  height: 3rem;
  background: rgb(162, 240, 251);
}
.my-collapse{
  width: 3rem;
  height: 100%;
  background: rgb(217, 222, 227);
  float: left;
}
.my-tabs{
  float: left;
}
.el-tag{
  border-radius: 0;
  height: 3rem;
  line-height: 3rem;
}
.el-tag:hover{
  cursor: pointer;
}
</style>
